<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-09-07 15:02:07
 * @LastEditTime : 2022-09-08 11:57:05
 * @FilePath     : \侦听器\watchEffect\组合式API写法\副作用刷新时机\APP.vue
-->
<template>
  <div id="value">{{count}}</div> 
  <button @click="countAdd">增加</button>
</template>

<script lang="ts">
import {  defineComponent, ref, watchEffect,  } from 'vue'

export default defineComponent({
  name: 'APP',
  setup(){
    let count = ref(0);
    const countAdd = () => {
      count.value++;
    }
    watchEffect(
      () => {   //该函数为要运行的副作用函数，该副作用函数的参数也是一个函数，用来注册清理回调。清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用
        console.log(count.value)
        console.log(document.querySelector('#value') && document.querySelector('#value').innerText)
      },
      {
        flush: 'post' //如果要操作“更新之后的DOM”，就要配置 flush: ‘post’
        /**
         * flush 取值：
         * pre （默认） 侦听器将在组件渲染之前执行
         * post （在组件渲染之后触发，这样你就可以访问更新的 DOM。这也将推迟副作用的初始运行，直到组件的首次渲染完成。）
         * sync （与watch一样使其为每个更改都强制触发侦听器，然而，这是低效的，应该很少需要，即在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器）
         */
      }
    )
    return{
      count,
      countAdd
    }
  }
})
</script>